<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .canvas {
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas" width="500" height="500"></canvas>

    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec2 aPosition;
      void main(){
        gl_Position = vec4(aPosition, 0.0, 1.0);
      }
    </script>
    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
      void main(){
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    </script>

    <script>
      // 获取canvas
      const canvas = document.querySelector(".canvas");
      // 获取webgl上下文
      const gl = canvas.getContext("webgl");
      // 创建顶点着色器和片元着色器
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      // 获取着色器源码
      const vertexSource = document.getElementById("vertex-shader").innerText;
      const fragmentSource = document.getElementById("fragment-shader").innerText;
      // 绑定着色器源码
      gl.shaderSource(vertexShader, vertexSource);
      gl.shaderSource(fragmentShader, fragmentSource);
      // 编译着色器源码
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);
      // 创建程序对象
      const program = gl.createProgram();
      // 将编译好的着色器对象附加到程序对象
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      // 链接程序对象
      gl.linkProgram(program);
      // 使用程序对象
      gl.useProgram(program);
      // 顶点数据
      const vertices = new Float32Array([
        -0.5,
        -0.5, // 第一个点的坐标
        0.5,
        0.5, // 第二个点的坐标
      ]);
      // 创建缓冲区对象
      const buffer = gl.createBuffer();
      // 绑定缓冲区
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      // 将顶点数据写入缓冲区对象
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      // 获取aPosition变量的存储位置
      const aPositionLocation = gl.getAttribLocation(program, "aPosition");
      // 在当前绑定的顶点缓冲区对象中指定顶点属性数组的信息
      gl.vertexAttribPointer(
        aPositionLocation,
        2,
        gl.FLOAT,
        false,
        2 * Float32Array.BYTES_PER_ELEMENT,
        0,
      );
      // 启用顶点属性数组
      gl.enableVertexAttribArray(aPositionLocation);
      // 绘制线段
      gl.drawArrays(gl.LINES, 0, 2);
    </script>
  </body>
</html>
